<template>
  <div>
    <nuxt-link class="article-link" :to="'/'+$props.articleInfo.FilePath">
      <h3 class="article-title">{{ $props.articleInfo.Title }}</h3>
      <span class="article-date">发布日期：{{$props.articleInfo.UpdatedAt}}</span>
      <span v-for="tag in $props.articleInfo.Tags" :key="tag" class="article-tag">{{tag}}</span>
      <div style="clear:both;"></div>
      <p class="article-desc">{{ $props.articleInfo.Preview }}...</p>
    </nuxt-link>
  </div>
</template>

<script>
  export default {
    props: {
      articleInfo: {
        type: Object,
        default: function () {
          return {
            ID: 1,
            FilePath:'go-vscode1',
            Title: 'Go语言开发环境配置(VSCode)1',
            Preview: '配置Go语言时遇到一些坑，特别是VSCode中Go工具包的安装及相关的科学上网知识，查了很多资料都描述不清晰，可能是我认为是难点的内容在别人那里是不需要说明的基础吧。其实只要科学上网配置完成，VSCode中安装工具包超级简单，对，是超级简单。好像本文标题不对？应该叫“Go语言工具包安装”？好吧，我在这里是把Go的环境变量等配置当作不需要说明的基础了，那些东东网上很多，我在本文略过了:)',
            CreatedAt: '2018-10-01 12:23:33',
            UpdatedAt: '2018-10-01 12:23:33',
            Tags:['javascript','node'],
          }
        }
      },
    },
  }
</script>

<style scoped>
.article-link {
  text-decoration: none;
}
.article-title{
  color: #5BAC4A;
}
.article-date{
  font-size: 14px;
  color: gray;
}
.article-tag {
  font-size: 14px;
  float: right;
  border: 1px #1d1f21 solid;
  border-radius: 5px;
  display:inline-block;
  padding: 0 5px;
  margin-right: 10px ;
  color: gray;
}

.article-tag:hover {
  border: 1px burlywood solid;
  color: burlywood;
}
.article-desc {
  color: #c4c4c4;
  margin-bottom: 20px;
}
</style>